import '../css/page.less';
import Chunk from './chunk';
import Component from '../js/utils/basePageClass';

const homeImg = require('@/assets/images/tabbar/home.png');
const homeActiveImg = require('@/assets/images/tabbar/homeActivity.png');
const typeImg = require('@/assets/images/tabbar/type.png');
const typeActiveImg = require('@/assets/images/tabbar/typeActivity.png');
const cartImg = require('@/assets/images/tabbar/cartCenter.png');
const cartActiveImg = require('@/assets/images/tabbar/cartActivity.png');
const mineImg = require('@/assets/images/tabbar/userCenter.png');
const mineActiveImg = require('@/assets/images/tabbar/userCenterActivity.png');

export interface ITab {
    title: string;
    checked: boolean;
    icon: any;
    icon_active: any;
}

const tabbar: HTMLDivElement = document.querySelector('.page_wrapper_down');

class Index extends Component {
    public state: any;
    constructor() {
        super();
        this.state = {
            tabbarInfo: [
                { title: '那家网', icon: homeImg, icon_active: homeActiveImg, checked: true },
                { title: '类型', icon: typeImg, icon_active: typeActiveImg, checked: false },
                { title: '购物车', icon: cartImg, icon_active: cartActiveImg, checked: false },
                { title: '我的', icon: mineImg, icon_active: mineActiveImg, checked: false }
            ],
            pageWrapper: null,
            tabWrapper: null
        }
    }
    pageDidMount() {
        this.setState({
            pageWrapper: document.querySelector('.page_wrapper_top'),
            tabWrapper: document.querySelector('.page_wrapper_down')
        })
        this.initTabbar()
    }
    initResult() {
        (document.querySelector('#btn') as HTMLButtonElement).onclick = () => {
            Chunk.intro()
        }

        (document.querySelector('#btn2') as HTMLButtonElement).onclick = () => {
            var str = (document.querySelector('.page_wrapper_input') as HTMLInputElement).value;
            location.href = './result.html?result=' + encodeURIComponent(str)
        }
    }
    checkIndex(index: number) {
        let { tabbarInfo, tabWrapper, pageWrapper } = this.state;
        tabbarInfo = tabbarInfo.map((tab: ITab, num: number) => {
            return {
                ...tab,
                checked: index === num
            }
        })
        this.setState({
            tabbarInfo
        })
        const tabDomList: HTMLDivElement[] = tabWrapper.getElementsByClassName('page_wrapper_down_tabbar');
        for (let i = 0; i < tabDomList.length; i++) {
            if (tabbarInfo[i].checked) {
                tabDomList[i].getElementsByTagName('img')[0].setAttribute('src', tabbarInfo[i].icon_active);
                tabDomList[i].classList.add('page_wrapper_down_tabbar_active')
            } else {
                tabDomList[i].getElementsByTagName('img')[0].setAttribute('src', tabbarInfo[i].icon);
                tabDomList[i].classList.remove('page_wrapper_down_tabbar_active')
            }
            pageWrapper.querySelectorAll('.page_wrapper_top_inner')[i].classList.remove('show')
        }
        pageWrapper.querySelectorAll('.page_wrapper_top_inner')[index].classList.add('show')
    }
    initTabbar() {
        const { tabbarInfo, tabWrapper, pageWrapper } = this.state as { tabbarInfo: ITab[]; tabWrapper: HTMLDivElement, pageWrapper: HTMLDivElement };
        tabWrapper.innerHTML = ''
        tabbarInfo.forEach((item: ITab) => {
            const eleString = `<div class="page_wrapper_down_tabbar ${item.checked ? 'page_wrapper_down_tabbar_active' : ''}">
            <div class="page_wrapper_down_tabbar_icon">
                <img src="${item.checked ? item.icon_active : item.icon}" alt="">
            </div>
              ${item.title}
            </div`
            tabWrapper.innerHTML += eleString;
        });
        for (let i = 0; i < tabbarInfo.length; i++) {
            (document.querySelectorAll('.page_wrapper_down_tabbar')[i] as HTMLDivElement).onclick = this.checkIndex.bind(this, i)
        }
        pageWrapper.querySelector('.page_wrapper_top_inner').classList.add('show')
    }
}
new Index()

